{% extends "base.html" %}

{% block title %}{{ event.name|escape }} - {{ application_name }}{% endblock %}

{% block head %}
  {% if debug %}
    <script src="/static/javascript/debug/browser.js" type="text/javascript"></script>
    <script src="/static/javascript/debug/dialog.js" type="text/javascript"></script>
    <script src="/static/javascript/debug/dom.js" type="text/javascript"></script>
    <script src="/static/javascript/debug/drag.js" type="text/javascript"></script>
    <script src="/static/javascript/debug/event.js" type="text/javascript"></script>
    <script src="/static/javascript/debug/io.js" type="text/javascript"></script>
    <script src="/static/javascript/debug/lang.js" type="text/javascript"></script>
    <script src="/static/javascript/debug/offscreen.js" type="text/javascript"></script>
    <script src="/static/javascript/debug/tasklist.js" type="text/javascript"></script>
  {% else %}
    <script src="/static/javascript/tasks.js" type="text/javascript"></script>
  {% endif %}

  {% if event.published %}
    <link rel="alternate" type="application/atom+xml" title="{{ event.name|escape }}" href="{{ request.path }}?id={{ event.key|stringformat:"s"|urlencode }}&amp;output=atom"/>
  {% endif %}

  <script type="text/javascript">
  //<![CDATA[
  //<
  
  function newCollaborator() {
    var form = document.getElementById("memberform");
    var dialog = document.getElementById("memberform_dialog");
    DialogBox.instance().show(dialog, function() {
      form["email"].focus();
    });
  }

  function publishTaskList(button) {
    var publish = button.value == "Publish";
    if (publish) {
      var dialog = document.getElementById("publishform_dialog");
      DialogBox.instance().show(dialog);
    } else {
      doPublish(false);
    }
  }

  function doPublish(publish) {
    var dialog = document.getElementById("publishform_dialog");
    var info = document.getElementById("publish_info");

    // Disable all the publish buttons as we make the request
    var buttons = [document.getElementById("publish_button")];
    var inputs = dialog.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
      if (inputs[i].type == "button") {
        buttons.push(inputs[i]);
      }
    }
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].disabled = true;
    }

    // Make the request
    var body = "id={{ event.key|stringformat:"s"|urlencode }}";
    if (publish) {
      body += "&publish=1";
    }
    download("/publishevent.do", function() {
      buttons[0].value = publish ? "Unpublish" : "Publish";
      if (publish) {
        DialogBox.instance().close();
        info.style.display = "";
      } else {
        info.style.display = "none";
      }
      for (var i = 0; i < buttons.length; i++) {
        buttons[i].disabled = false;
      }
    }, {
      post: true,
      body: body
    });
  }

  // Home-made
  window.addEvent ('domready', function(){
  
  $('set_type_button').addEvent ('click', function(){
    setEventType ($('set_type_button'));
  });
  
  $('settypepastform_button_ok').addEvent ('click', function(){
    setTypeEvent ('past');
    DialogBox.instance().close();
  });
  
  function setEventType (button) {
    var past = button.value == "Historical";
    if (!past) {
      var dialog = document.getElementById("settypepastform_dialog");
      DialogBox.instance().show(dialog);
    } else {
      setTypeEvent('spec');
    }
  }

  function setTypeEvent (type) {
  
    var body = "id={{ event.key|stringformat:"s"|urlencode }}";
    body += "&type="+type;
    download("/changetypeevent.do", function() {
      $('set_type_button').value = (type=='past') ? "Historical" : "Speculative";
    }, {
      post: true,
      body: body
    });
    
  }

  });

  //]]>
  </script>
  <style type="text/css">

  .tasklist .completed td.description .text {
    color: gray;
    text-decoration: line-through;
  }

  .collaborators {
    float: right;
  }

  .collaborators .button {
    padding-left: 0.5em;
  }

  h1 {
    margin: 0;
  }

  .inbox {
    clear: both;
    margin-top: 0.5em;
  }

  .inbox .top {
    margin-bottom: 5px;
  }

  .inbox .task table td {
    border-bottom: 0;
    padding-bottom: 3px;
    padding-top: 3px;
  }

  #publish_info {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .newtasklist {
    margin-left: 10px;
    margin-top: 5px;
  }

  .newtasklist img {
    vertical-align: middle;
  }

  .newtasklist .text {
    text-decoration: underline;
    color: #0000cc;
  }

  .backlink {
    text-decoration: none;
    float: left;
    font-size: 2em;
    margin-right: 10px;
  }

  </style>
{% endblock %}

{% block body %}
  <div class="collaborators">
    <table><tr><td>
      <span class="label">Collaborators:</span>
      {% for member in event.eventadmin_set %}
        {% ifequal member.user.email user.email %}
          Me
        {% else %}
          {{ member.user.nickname }}
        {% endifequal %}
        {% if not forloop.last %}/{% endif %}
      {% endfor %}
    </td><td class="button">
      <input type="button" value="New" onclick="newCollaborator()"/>
    </td></tr></table>
  </div>

  <a class="backlink" href="/inbox">&lt;&lt;</a>
  <h1>{{ event.name|escape }}</h1>

  <form action="/event.do" method="post">
    <div class="inbox">
      <input type="hidden" name="next" value="{{ request.uri|escape }}"/>
      <div class="buttons top">
        <div class="left corner"></div>
        <div class="right corner"></div>
        <div class="info">
          {% if archive %}
            <span class="count">{{ conditions|length }} conditions total</span>
          {% else %}
            <span class="count">{{ conditions|length }} active conditions</span>
            <span class="link"><a href="{{ request.path }}?id={{ event.key|stringformat:"s"|urlencode }}&amp;archive=1">View all</a></span>
          {% endif %}
        </div>
        <!--<span class="button"><input type="submit" name="action" value="Archive Completed"/></span>-->
        <span class="button"><input id="publish_button" type="button" value="{% if event.published %}Unpublish{% else %}Publish{% endif %}" onclick="publishTaskList(this)"/></span>
        <span id="publish_info" style="margin-left: 0.5em;{% if not event.published %}display: none{% endif %}">Published as <a href="{{ request.uri|escape }}&amp;output=html">HTML</a>, <a href="{{ request.uri|escape }}&amp;output=atom">Atom feed</a></span>
        <span class="button"><input id="set_type_button" type="button" value="{% ifequal event.type 'spec' %}Speculative{% else %}Historical{% endifequal %}"/></span>
      </div>
      <div class="table">
        <div id="container"></div>
        <div class="newtasklist" style="cursor: pointer" onclick="taskList.newTask()"><img src="/static/images/zip-plus.gif" style="width: 14px; height: 14px"> <span class="text">New condition</span></div>
        {% if not conditions %}
          <div class="message">You don't have any active conditions for this event. To get started, <a href="javascript:Task.showDialog()">create a new condition</a>.</div>
        {% else %}
          <div class="message">Drag conditions up and down to rearrange them.</div>
        {% endif %}
      </div>
    </div>
  </form>
  
  <div id="memberform_dialog" class="dialog" style="display: none">
    <div class="title">New Collaborator</div>
    <div class="content">
      <form action="/addmember.do" method="post" id="memberform">
        <div class="form">
          <input type="hidden" name="next" value="{{ request.uri|escape }}"/>
          <input type="hidden" name="list" value="{{ event.key }}"/>
          <div class="field">
            <div class="name">Username</div>
            <div class="value"><input name="email" type="text" size="10"/></div>
          </div>
          <div class="buttons">
            <span class="button"><input type="submit" value="Add Collaborator"/></span>
            <span class="button"><input type="button" value="Cancel" onclick="DialogBox.instance().close()"/></span>
          </div>
        </div>
      </form>
    </div>
  </div>

  <div id="publishform_dialog" class="dialog" style="display: none">
    <div class="title">Publish Event</div>
    <div class="content">
      <div class="form">
        <div class="message">Publishing this event will make it visible to anyone (though only collaborators will be able to add/edit conditions).  Are you sure you want to do this?</div>
        <div class="buttons">
          <span class="button"><input class="publishform_button" type="button" value="Yes, Publish Event !" onclick="doPublish(true)"/></span>
          <span class="button"><input class="publishform_button" type="button" value="Nope." onclick="DialogBox.instance().close()"/></span>
        </div>
      </div>
    </div>
  </div>

  <div id="settypepastform_dialog" class="dialog" style="display: none">
    <div class="title">Define Event as Historical</div>
    <div class="content">
      <div class="form">
        <div class="message">Defining this event as historical means that this Event happened somewhere along the course of our civilization. You may need proof to convince the skeptics. Are you sure you want to do this?</div>
        <div class="buttons">
          <span class="button"><input id="settypepastform_button_ok" class="settypepastform_button" type="button" value="Yes, it happened !"/></span>
          <span class="button"><input class="settypepastform_button" type="button" value="Nope." onclick="DialogBox.instance().close()"/></span>
        </div>
      </div>
    </div>
  </div>

{% endblock %}

{% block footer %}
  <script type="text/javascript">

  var k = "{{ event.key }}";
  var taskList = new TaskList(k, Task.parseList([
    {% for task in conditions %}
      [k, "{{ task.key }}", "{{ task.description|stringformat:"s"|addslashes }}", {% if task.completed %}true{% else %}false{% endif %}, {% if task.user %}'{{ task.user }}'{% else %}'All'{% endif %}, {{ task.nb_comments }}] {% if not forloop.last %},{% endif %}
    {% endfor %}
  ]));
  taskList.attach(document.getElementById("container"));

  </script>
{% endblock %}
